<template>
	<!-- <view class="" v-for="team in props.teamList"> -->
	<view class="" v-for="team in teamList">
		<up-card padding='0rpx' :foot-border-top="false" :head-border-bottom='false' style="background-color: #f6f8fa;">
			<template #body>
				<view class="" slot="body">
					<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0" style="position: relative;">
						<image :src="imgs" mode="aspectFill" style="width: 300rpx;height: 300rpx;"></image>
						<view >
							<view>{{team.teamName}}</view>
							<view>{{team.description}}</view>
							<up-tag plain size="mini" type="warning" style="margin: 8rpx;margin-left: 0rpx;">
								{{ teamStatusEnum[team.teamState] }}
							</up-tag>
							<view>{{ `队伍人数: ${team.hasJoinNum}/${team.maxNum}` }}</view>
							<view v-if="team.expireTime"> {{ '过期时间:' + team.expireTime }}</view>
							<view> {{ '创建时间:' + team.createTime }}</view>
						</view>
					</view>
				</view>
			</template>
			<template #foot>
				<view
					style="display: flex; justify-content: flex-end; align-items: center; width: 50%;margin-left: auto;">
					<up-button @click="getInfoTeam(team.id)"> 查看队伍</up-button>
					<up-button type="primary" @click="preJoinTeam(team)"
						v-if="team.userId !== currentUser?.id && !team.hasJoin">加入队伍</up-button>
					<up-button @click="doUpdateTeam(team.id)" v-if="team.userId === currentUser?.id">更新队伍</up-button>
					<up-button @click="doQuitTeam(team.id)" v-if="team.hasJoin">退出队伍</up-button>
					<up-button @click="doDeleteTeam(team.id)" v-if="team.userId === currentUser?.id">解散队伍</up-button>
				</view>
			</template>
		</up-card>
	</view>
			<up-modal :show="showPasswordDialog" :title="输入密码" @confirm="doJoinTeam" showCancelButton @cancel="doJoinCancel">
				  <up-input
				    placeholder="请输入密码"
				    border="surround"
				    v-model="teamPassword"
				  ></up-input>
			</up-modal>
</template>

<script setup lang="ts">
	import type { teamType } from '@/models/team'
	import { teamStatusEnum } from '@/constants/team'
	import imgs from '@/static/vue.svg'
	import myAxios from '@/plugins/myAxios'
	import { getCurrentUser } from '@/services/user'
	import type { userType } from '@/models/user'
	import { ref} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	interface TeamCardListProps {
		teamList : teamType[]
	}

	const props = withDefaults(defineProps<TeamCardListProps>(), {
		//@ts-ignore
		teamList: [] as teamType[]
	})
// 假数据定义
const teamList = ref([
  {
    id: 1,
    teamName: '探索小队',
    description: '一个热爱探索未知领域的团队，欢迎加入！',
    teamState: 0, // 0-公开, 1-私密
    hasJoinNum: 3,
    maxNum: 5,
    expireTime: '2025-01-15 12:00:00',
    createTime: '2025-01-01 10:00:00',
    userId: 1001, // 队长用户ID
    hasJoin: false // 当前用户是否已加入
  },
  {
    id: 2,
    teamName: '登山爱好者联盟',
    description: '每周末一起登山，挑战自我极限！',
    teamState: 1, // 私密队伍
    hasJoinNum: 8,
    maxNum: 10,
    expireTime: '2025-02-01 18:00:00',
    createTime: '2025-01-05 14:00:00',
    userId: 1002,
    hasJoin: true
  },
  {
    id: 3,
    teamName: '编程爱好者',
    description: '欢迎热爱技术和分享的朋友加入。',
    teamState: 0, // 公开队伍
    hasJoinNum: 5,
    maxNum: 10,
    expireTime: null, // 没有过期时间
    createTime: '2025-01-10 08:30:00',
    userId: 1003,
    hasJoin: false
  },
  {
    id: 4,
    teamName: '旅行小队',
    description: '一起去感受世界的美好与自然的魅力。',
    teamState: 0,
    hasJoinNum: 6,
    maxNum: 6,
    expireTime: '2025-01-20 20:00:00',
    createTime: '2025-01-03 10:00:00',
    userId: 1004,
    hasJoin: false
  },
  {
    id: 5,
    teamName: '篮球俱乐部',
    description: '每周日固定打球，欢迎球技高手！',
    teamState: 1, // 私密队伍
    hasJoinNum: 4,
    maxNum: 12,
    expireTime: '2025-01-30 12:00:00',
    createTime: '2025-01-01 15:00:00',
    userId: 1005,
    hasJoin: true
  }
])
	const currentUser = ref('')
	const showPasswordDialog = ref(false)
	const teamPassword = ref('')
	const joinTeamId = ref(0)
	const loading = ref(false)

	/**
	 * 加载用户信息
	 */
	onLoad(async () => {
		currentUser.value = await getCurrentUser()
	})

	const preJoinTeam = (team : teamType) => {
		joinTeamId.value = team.id
		if (team.teamState === 0) {
			doJoinTeam()
		} else {
			showPasswordDialog.value = true
		}
	}

	/**
	 * 查看队伍信息详情
	 */
	const getInfoTeam = (id : number) => {
		uni.navigateTo({
			url: `/pages/team/info?id=${id}`
		})
	}

	/**
	 * 加入队伍
	 * @param id
	 */
	const doJoinTeam = async () => {
		if (!joinTeamId.value) {
			return
		}
		try {
			const res = await myAxios.post('/team/join', {
				teamId: joinTeamId.value,
				teamPassword: teamPassword.value
			})
			if (res?.code === 0 && res) {
				uni.showToast({
					title: '加入成功',
					icon: 'success'
				})
				doJoinCancel()
			} else {
				uni.showToast({
					title: '加入失败' + (res.description ? `,${res.description}` : ''),
					icon: 'none'
				})
			}
		} catch (error) {
			uni.showToast({
				title: '加入失败',
				icon: 'none'
			})
		}
	}

	/**
	 * 退出队伍
	 * @param id
	 */
	const doQuitTeam = async (id : number) => {
		try {
			const res = await myAxios.post('/team/quit', {
				teamId: id
			})
			if (res?.code === 0 && res) {
				uni.showToast({
					title: '退出队伍成功',
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: '退出失败' + (res.description ? `,${res.description}` : ''),
					icon: 'none'
				})
			}
		} catch (error) {
			uni.showToast({
				title: '退出失败',
				icon: 'none'
			})
		}
	}

	/**
	 * 解散队伍
	 * @param id
	 */
	const doDeleteTeam = async (id : number) => {
		try {
			const res = await myAxios.post('/team/delete', {
				id
			})
			if (res?.code === 0 && res) {
				uni.showToast({
					title: '解散队伍成功',
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: '解散队伍失败',
					icon: 'none'
				})
			}
		} catch (error) {
			uni.showToast({
				title: '解散队伍失败',
				icon: 'none'
			})
		}
	}

	/**
	 * 更新队伍信息
	 * @param id
	 */
	const doUpdateTeam = (id : number) => {
		uni.navigateTo({
			url: `/pages/team/update?id=${id}`
		})
	}

	const doJoinCancel = () => {
		teamPassword.value = ''
		joinTeamId.value = 0
		showPasswordDialog.value=false
	}
</script>

<style scoped>
	/* 样式可根据需要调整 */
	.tags {
		display: flex;
		flex-wrap: wrap;
	}

	.contact-btn {
		margin-top: 12px;
	}
</style>